<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>

	<body>
		<ul>
			<li>第1个孩子</li>
			<li>第2个孩子</li>
			<li>第3个孩子</li>
			<li>第4个孩子</li>
			<li>第5个孩子</li>
			<p>我不需要变色</p>
		</ul>
		<script>
			// 点击每个小li 当前li 文字变为红色
			// const lis = document.querySelectorAll("ul li");
			// for (let i = 0; i < lis.length; i++) {
			// 	lis[i].addEventListener("click", function () {
			// 		this.style.color = "red";
			// 	});
			// }

			// 按照事件委托的方式  委托给父级，事件写到父级身上
			const ul = document.querySelector("ul");
			// e.target具体被点击的对象
			// target对象的tagName就是标签名
			ul.addEventListener("click", (e) => {
				// 我的需求，我们只要点击li才会有效果
				if (e.target.nodeName === "LI") {
					// 事件委托中，事件对象e的target属性代表真正触发事件的对象
					e.target.style.color = "red";
				}
			});
		</script>
	</body>
</html>
